<!--
/**
* Author: gaohui
* Date: 2023-03-02 13:57
* Desc: DynamicComp 动态组件
*/
-->

<template>
  <title-line title="动态组件基础操作" />
  <component :is="currentComp"></component>
  <div class="mt10">
    <el-button @click.stop="changeComp">切换组件</el-button>
  </div>
</template>

<script name="DynamicComp" lang="ts" setup>
import { ref, computed } from "vue";
import CompA from "./components/CompA.vue";
import CompB from "./components/CompB.vue";
import CompC from "./components/CompC.vue";

const compMap = {
  0: CompA,
  1: CompB,
  2: CompC,
};
const currentCompValue = ref(0);
const currentComp = computed(() => {
  return compMap[currentCompValue.value] || compMap[0];
});

const changeComp = () => {
  currentCompValue.value += 1;
  if (currentCompValue.value > 2) {
    currentCompValue.value = 0;
  }
};
</script>
<style lang="scss" scoped></style>
